<template>
  <div id="app">
    <!-- switch DOM结构 -->
     <div class="ifast-group-switch">
          <div class="ifast-switch">
              <input type="hidden" />
              <span class="ifast-inner-left">开</span>
              <span class="ifast-inner-right">关</span>
          </div>
      </div>
       <div class="ifast-group-switch">
          <div class="ifast-switch ifast-switch-checked">
              <input type="hidden" />
              <span class="ifast-inner-left">开</span>
              <span class="ifast-inner-right">关</span>
          </div>
      </div>
  <!-- carousel DOM结构 -->
    <div class="ifast-carousel-box">
        <div class="ifast-carousel-arrow-left">
             <Icon type="ion-ios-arrow-left" size="20" color="white"></Icon>
        </div>
        <div class="ifast-list">
            <div class="ifast-item">
                <div class="ifast-cell">1`</div>
                <div class="ifast-cell">1`</div>
                <div class="ifast-cell">1`</div>
                <div class="ifast-cell">1`</div>
            </div>
        </div>
        <div class="ifast-carousel-arrow-right">
            <Icon type="ion-ios-arrow-right" size="20" color="white"></Icon>
        </div>
        <ul class="ifast-carousel-dos">
            <li class="ivu-carousel-active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
     <div class="p10">
      <div class="ifast-group-radio">
       <label class="ifast-radio-label ifast-radio-checked ifast-disabled">
         <span class="ifast-radio">
           <span class="ifast-radio-inner"></span>
            <input type="radio" class="ifast-radio-input"/>
         </span>
          <Icon></Icon>
          <span>Apply</span>
       </label>
     </div>
      <div class="ifast-group-radio ifast-radio-button lg">
        <label class="ifast-radio-label ifast-radio-checked">
          <span class="ifast-radio">
            <span class="ifast-radio-inner"></span>
            <input
              type="radio"
              class="ifast-radio-input"
            />
            北海
          </span>
        </label>
        <label class="ifast-radio-label">
          <span class="ifast-radio">
            <span class="ifast-radio-inner"></span>
            <input
              type="radio"
              class="ifast-radio-input"
            />
            北海
          </span>
        </label>
        <label class="ifast-radio-label radio-button-disabled">
          <span class="ifast-radio">
            <span class="ifast-radio-inner"></span>
            <input
              type="radio"
              class="ifast-radio-input"
            />
            北海
          </span>
        </label>

      </div>
       <div class="ifast-group-radio ifast-radio-button">
        <label class="ifast-radio-label ifast-radio-checked">
          <span class="ifast-radio">
            <span class="ifast-radio-inner"></span>
            <input
              type="radio"
              class="ifast-radio-input"
            />
            北海
          </span>
        </label>
        <label class="ifast-radio-label">
          <span class="ifast-radio">
            <span class="ifast-radio-inner"></span>
            <input
              type="radio"
              class="ifast-radio-input"
            />
            北海
          </span>
        </label>
        <label class="ifast-radio-label radio-button-disabled">
          <span class="ifast-radio">
            <span class="ifast-radio-inner"></span>
            <input
              type="radio"
              class="ifast-radio-input"
            />
            北海
          </span>
        </label>

      </div>
      <div class="ifast-group-radio ifast-radio-button sm">
        <label class="ifast-radio-label ifast-radio-checked">
          <span class="ifast-radio">
            <span class="ifast-radio-inner"></span>
            <input
              type="radio"
              class="ifast-radio-input"
            />
            北海
          </span>
        </label>
        <label class="ifast-radio-label">
          <span class="ifast-radio">
            <span class="ifast-radio-inner"></span>
            <input
              type="radio"
              class="ifast-radio-input"
            />
            北海
          </span>
        </label>
        <label class="ifast-radio-label radio-button-disabled">
          <span class="ifast-radio">
            <span class="ifast-radio-inner"></span>
            <input
              type="radio"
              class="ifast-radio-input"
            />
            北海
          </span>
        </label>

      </div>
    </div>



     <div class="ifast-group-radio">
       <label class="ifast-radio-label ifast-radio-checked">
         <span class="ifast-radio">
           <span class="ifast-radio-inner"></span>
            <input type="radio" class="ifast-radio-input"/>
         </span>
          <Icon></Icon>
          <span>Apply</span>
       </label>
     </div>
      <p>checkbox</p>
    <div class="ifast-group-checkbox">
      <label class="ifast-checkbox-label ifast-checkbox-checked">
        <span class="ifast-checkbox">
          <span class="ifast-checkbox-inner"></span>
          <input type="checkbox" class="ifast-checkbox-input">
          <span style="font-size:19px">中文</span>
        </span>
      </label>
      <label class="ifast-checkbox-label ifast-checkbox-disabled">
        <span class="ifast-checkbox">
          <span class="ifast-checkbox-inner"></span>
          <input type="checkbox" class="ifast-checkbox-input">
          <span style="font-size:19px">中文</span>
        </span>
      </label>
       <label class="ifast-checkbox-label ifast-checkbox-line">
        <span class="ifast-checkbox">
          <span class="ifast-checkbox-inner"></span>
          <input type="checkbox" class="ifast-checkbox-input">
          <span style="font-size:19px">中文</span>
        </span>
      </label>
    </div>
     <div class="ifast-group-checkbox ifast-checkbox-button">
      <label class="ifast-checkbox-label ifast-checkbox-checked">
        <span class="ifast-checkbox">
          <span class="ifast-checkbox-inner"></span>
          <input type="checkbox" class="ifast-checkbox-input">
        </span>
        <span>中文</span>
      </label>
      <label class="ifast-checkbox-label ifast-checkbox-disabled">
        <span class="ifast-checkbox">
          <span class="ifast-checkbox-inner"></span>
          <input type="checkbox" class="ifast-checkbox-input">
        </span>
         <span>中文</span>
      </label>
       <label class="ifast-checkbox-label ifast-checkbox-line">
        <span class="ifast-checkbox">
          <span class="ifast-checkbox-inner"></span>
          <input type="checkbox" class="ifast-checkbox-input">
        </span>
        <span>中文</span>
      </label>
    </div>
     <i class="ifast-icon-add"></i>
     <Icon :size="20" color="red" type="alert" @click="iconClick()"></Icon>
     <Row>
        <Col span="6">this is col</Col>
        <Col span="6">this is col</Col>
     </Row>
      <Row>
        <Col span="3">col-3</Col>
        <Col span="3">col-3</Col>
        <Col span="3" offset="3">col-3 offset-3</Col>
     </Row>
     <Row type="flex" justify="space-between" @click="iconClick()">
        <Col span="3" @click="iconClickTwo()">col-3 click</Col>
        <Col span="3" @click="iconClickTwo()">col-3 click</Col>
        <Col span="3" @click="iconClickTwo()" @mouseenter="mouseenterCol()">col-3 click</Col>
     </Row>
     <p> wrap="wrap-revers"</p>
     <Row type="flex" justify="flex-start" wrap="wrap">
        <Col flex="2">1</Col>
        <Col flex="1">2</Col>
        <Col flex="1">3</Col>
     </Row>
     <Row type="flex">
        <Col >col-3 1</Col>
        <Col >col-3 2</Col>
        <Col >col-3 offset-3 3</Col>
     </Row>
      <p>顺序</p>
     <Row type="flex" justify="space-between">
        <Col  order="2">col-3 1</Col>
        <Col  order="3" align="flex-end">col-3 2</Col>
        <Col  order="1" style="height:100px">col-3 3</Col>
     </Row>
    <!-- <ion-icon name="heart"></ion-icon> -->
    <!-- <div class="checkbox">
      <label>
        <input type="checkbox"> Check me out
      </label>
    </div>
    <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      Option two can be something else and selecting it will deselect option one
    </label>
  </div>
  <div class="radio disabled">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
      Option three is disabled
    </label>
  </div>
    <div class="form-group ifast-col-xs-6 ifast-col-md-4 ifast-col-lg-3">
      <div class="input-group form-group-sm"> <label class="input-group-addon bn"> <span class="w100">
            模块名称</span> </label>
        <input
          type="text"
          class="form-control radius3"
        ></div>
    </div>
    <div class="form-group ifast-col-xs-6 ifast-col-md-4 ifast-col-lg-3">
      <div class="input-group form-group-sm ">
        <label class="input-group-addon bn">
          <span class="w100"><i
              class="red ng-hide"
              ng-show="isRequired({&quot;key&quot;:&quot;customizationLevel&quot;})"
            >* </i>快码应用层级</span>
        </label>
        <select class="form-control">
          <option>请选择</option>
          <option
            value="S"
            data-id="3"
          >系统级别</option>
          <option>用户级别</option>
        </select>
      </div>
    </div> -->
    <!-- <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <select multiple class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>

    <form class="form-horizontal">
    <div class="form-group">
      <label for="inputEmail3" class="ifast-col-sm-2 control-label">Email</label>
      <div class="ifast-col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword3" class="ifast-col-sm-2 control-label">Password</label>
      <div class="ifast-col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
      </div>
    </div>
    <div class="form-group">
      <div class="ifast-col-sm-offset-2 ifast-col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox"> Remember me
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="ifast-col-sm-offset-2 ifast-col-sm-10">
        <button type="submit" class="btn btn-default">Sign in</button>
      </div>
    </div>
  </form>
  <form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form> -->
   <a href="#" class="ifast-btn ifast-btn-primary ifast-btn-lg ifast-btn-disabled" role="button">Primary link</a>
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" class="abc" style="background:red"/>
    <h1>h1 Example Heading <small>subtitle</small></h1>
    <h2>h2 Example Heading <small>subtitle</small></h2>
    <h3>h3 Example Heading <small>subtitle</small></h3>
    <h4>h4 Example Heading <small>subtitle</small></h4>
    <h5>h5 Example Heading <small>subtitle</small></h5>
    <h6>h6 Example Heading <small>subtitle</small></h6>
    <div class="ifast-row">
      <div class="ifast-col-md-6">.col-md-6</div>
      <div class="ifast-col-md-6">.col-md-6</div>
      <div class="ifast-col-md-1">.col-md-1</div>
      <div class="ifast-col-md-1">.col-md-1</div>
      <div class="ifast-col-md-1">.col-md-1</div>
      <div class="ifast-col-md-1">.col-md-1</div>
      <div class="ifast-col-md-1">.col-md-1</div>
      <div class="ifast-col-md-1">.col-md-1</div>
      <div class="ifast-col-md-1">.col-md-1</div>
      <div class="ifast-col-md-1">.col-md-1</div>
      <div class="ifast-col-md-1">.col-md-1</div>
      <div class="ifast-col-md-1">.col-md-1</div>
    </div> -->
    <!-- <Row>
        <i-col span="12">col-12</i-col>
        <i-col span="12">col-12</i-col>
    </Row> -->
    <!-- <div class="example">
      <button
        class="btn btn-default"
        type="button"
      >Button</button>
      <button
        type="button"
        class="btn btn-default btn-lg"
      >（默认样式）Default</button>

      <div class="btn outline btn-primary  btn-sm">（首选项）Primary</div>
      <button
        type="button"
        class="btn btn-success pill btn-xs"
      >（成功）Success</button>

      <button
        type="button"
        class="btn btn-info"
      >（一般信息）Info</button>

      <button
        type="button"
        class="btn btn-warning"
      >（警告）Warning</button>

      <button
        type="button"
        class="btn btn-danger"
      >（危险）Danger</button>
    </div> -->

    <!-- <button
      type="button"
      class="btn btn-link"
    >（链接）Link</button>
    <div class="btns vertical">
      <button class="btn btn-default">default</button>
      <button class="btn btn-default">default</button>
      <button class="btn btn-default">default</button>
      <button class="btn btn-default">default</button>
      <button class="btn btn-default">default</button>
      <button class="btn btn-default">default</button>
    </div>
    <div class="btns">
      <button class="btn btn-default">default</button>
      <button class="btn btn-default">default</button>
      <button class="btn btn-default">default</button>
    </div>
    <div class="example">
      <div class="table-overflow">
        <table class="table hover">
          <thead>
            <tr>
              <th>Name</th>
              <th>Registration Date</th>
              <th>E-mail address</th>
              <th>Premium Plan</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Nicky Almera</td>
              <td>September 14, 2013</td>
              <td>nicky@hotmail.com</td>
              <td>No</td>
            </tr>
            <tr>
              <td>Edmund Wong</td>
              <td>January 11, 2014</td>
              <td>edmund@yahoo.com</td>
              <td>Yes</td>
            </tr>
            <tr>
              <td>Harvinder Singh</td>
              <td>May 11, 2014</td>
              <td>harvinder@gmail.com</td>
              <td>Yes</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <table class="table striped bordered hover table-condensed">
      <thead>
        <tr>
          <th>Name</th>
          <th>Registration Date</th>
          <th>E-mail address</th>
          <th>Premium Plan</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>111</td>
          <td>111</td>
          <td>111</td>
          <td>111</td>
        </tr>
        <tr>
          <td>111</td>
          <td>111</td>
          <td>111</td>
          <td>111</td>
        </tr>
        <tr>
          <td>111</td>
          <td>111</td>
          <td>111</td>
          <td>111</td>
        </tr>
        <tr>
          <td>111</td>
          <td>111</td>
          <td>111</td>
          <td>111</td>
        </tr>
      </tbody>
    </table>
    <div
      class="btn btn-default"
      role="button"
    >Button</div>
    <select>
      <option>0000</option>
      <option>0000</option>
      <option>0000</option>
      <option>0000</option>
      <option>0000</option>
    </select>
    <input
      type="text"
      class="form-control input-sm"
    />
    <input
      type="text"
      class="form-control input-lg"
    />
    <input
      type="text"
      class="form-control"
    />

    <label class="checkbox">
      <input
        type="checkbox"
        value=""
      >
      Option one is this and that—be sure to include why it's great
    </label>

    <label class="radio">
      <input
        type="radio"
        name="optionsRadios"
        id="optionsRadios1"
        value="option1"
        checked
      >
      Option one is this and that—be sure to include why it's great
    </label>
    <label class="radio">
      <input
        type="radio"
        name="optionsRadios"
        id="optionsRadios2"
        value="option2"
      >
      Option two can be something else and selecting it will deselect option one
    </label>
    <label class="checkbox inline">
      <input
        type="checkbox"
        id="inlineCheckbox1"
        value="option1"
      > 1
    </label>
    <label class="checkbox inline">
      <input
        type="checkbox"
        id="inlineCheckbox2"
        value="option2"
      > 2
    </label>
    <label class="checkbox inline">
      <input
        type="checkbox"
        id="inlineCheckbox3"
        value="option3"
      > 3
    </label> -->

    <!-- <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">
    <ifast-form
        :model = "formData"
        :rules = "rules"
          ref  = "form"
      >
        <ifast-form-item
          label = "手机号"
          prop  = "tel"
        >
          <input
            type         = "text"
            v-model.trim = "formData.tel"
          />
        </ifast-form-item>
        <button
          @click = "handleSubmit"
          type   = "button"
        >保存</button>
      </ifast-form>
      <div>
        <p>
          <button @click="createToast2">多次点击只会有一个 toast 组件</button>
        </p>
        <p>
          <button @click="creartConfirm">多次点击只会有一个 confirm 组件</button>
        </p>
      </div> -->
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import ifastForm from "./components/form/ifastForm.vue";
import ifastFormItem from "./components/form/ifastFormItem.vue";
import Icon from "./components/icon/icon";
import Row from "./components/grid/grid";
import Col from "./components/grid/col";
import toast from "./components/toast/index-v2";
import Confirm from "./components/confirm/index";

export default {
  name: "app",
  components: {
    HelloWorld,
    ifastForm,
    ifastFormItem,
    Icon,
    Row,
    Col
  },
  data() {
    return {
      formData: {
        tel: ""
      },
      rules: {
        tel: [
          { required: true, message: "您的手机号码未输入", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/,
            message: "您的手机号码输入错误",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    iconClick(){
      console.log('iconClick')
    },
    mouseenterCol(){
      console.log('mouseenterCol')
    },
    iconClickTwo(){
      console.log('iconClickTwo')
    },
    createToast2() {
      toast.show({ msg: "你好", time: 5000 });
    },
    creartConfirm() {
      Confirm({
        title: "title",
        message: "message",
        confirmBtnText: "确定",
        cancelBtnText: "取消"
      })
        .then(() => {
          console.log("确定");
        })
        .then(() => {
          console.log("取消");
        });
    },
    handleSubmit() {
      this.$refs.form.validate(errs => {
        console.log(this);
        console.log(errs);
      });
    }
  },
  mounted(){
  }
};
</script>

<style  lang="scss">
@import "./styles/index.scss";
</style>
